<template>
  <div class="filter">
    <groups
      :columns="columns"
      :multi-groups="multiGroups"
      @clear="handleClear"
      @search="handleSearch"
      @select-change="selectChange">
    </groups>
  </div>
</template>

<script>
  import Groups from './Groups'
  import {getFilterOptions} from '@/axios/getData'
  export default {
    components: {
      Groups
    },
    data() {
      return {
        columns: [
          {
            type: 'select',
            fieldName: 'department',
            value: '',
            options: [],
            optionLabel: 'label',
            optionValue: 'value',
          },
          {
            type: 'select',
            fieldName: 'pattern',
            value: '',
            options: [],
            optionLabel: 'name',
            optionValue: 'value',
          },
          {
            type: 'input',
            fieldName: 'content',
            value: ''
          }
        ],
        multiGroups: false
      }
    },
    computed: {

    },
    created() {
      this.initPage()
    },
    methods: {
      initPage() {
        console.log('initPage')
        getFilterOptions().then(res => {
          console.log(res.data.data)
          const column = Object.assign({}, this.columns[0], {options: res.data.data})
          this.$set(this.columns, 0, column)
        })
      },
      handleClear() {

      },
      handleSearch(value) {
        console.log(value)
      },
      selectChange(info) {
        console.group('selectChange')
        console.log('groupIndex: %o', info.groupIndex)
        console.log('conditionIndex: %o', info.conditionIndex)
        console.log('columnIndex: %o', info.columnIndex)
        console.log('value: %o', info.value)
        console.groupEnd()
        const group = info.groups[info.groupIndex]
        const condition = group.conditions[info.conditionIndex]
        const column = condition.columns[info.columnIndex]
        const option = column.options.filter(item => item.value === info.value)[0] || {}
        console.log(option)
        const conType = option.conType
        if(conType == 3) {
          getFilterOptions({cid: info.value}).then(res => {
            console.log(res.data.data)
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
